<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        设备台账类型列表
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px;">
                                    <label>设备台账类型名称</label>
                                    <input type="text" name="typName" class="form-control" placeholder="请输入设备台账类型名称">
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search">
                                    <!--<i class="fa fa-search"></i>-->
                                    <span class="Bold">搜索</span>
                                </button>
                                <!--drive:sbtype:add-->
                                <a href="javascript:void(0);" class="btn btn-info pull-right" onclick="addType()" shiro:hasPermission="basic:acctype:edit">
                                    <!--<i class="fa fa-plus"></i>-->
                                    <span class="Bold">添加</span>
                                </a>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--创建类型模态框-->
<div class="modal fade" id="modal-create-type">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增设备台账类型</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-create" class="form-horizontal">
                    <div class="col-md-12" style="padding-top: 15px;">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">设备台账类型名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="typName" autocomplete="off" placeholder="设备台账类型名称">
                            </div>
                        </div>
                        <input type="hidden" name="typId" class="form-control" value="0">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">显示顺序</label>
                            <div class="col-sm-8">
                                <input type="number" step="1" class="form-control" name="typSortNum" autocomplete="off" placeholder="显示顺序">
                                <span style="font-size: 12px; color: #666;">* 数字越小越靠前</span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-create-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--编辑类型模态框-->
<div class="modal fade" id="modal-edit-type">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑设备台账类型</h4>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form id="typeForm-edit" class="form-horizontal">
                    <div class="col-md-12" style="padding-top: 15px;">
                        <input type="hidden" class="form-control" name="typId">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">设备台账类型名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="typName" autocomplete="off" placeholder="设备台账类型名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">显示顺序</label>
                            <div class="col-sm-8">
                                <input type="number" step="1" class="form-control" name="typSortNum" autocomplete="off" placeholder="显示顺序">
                                <span style="font-size: 12px; color: #666;">* 数字越小越靠前</span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit-type">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>

<script th:inline="javascript">

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-create-type", function () {
        js.validate.reset("typeForm-create");
        js.reset("typeForm-create");
    });
    /** 导入表单验证 */
    js.validate.init("typeForm-create", {
        fields: {
            typName: {
                validators: {
                    notEmpty: {message: '设备台账类型已存在'},
                    remote: {
                        url: ctx + "tool/equipmentType/checkUnique",
                        message: '设备台账类型已存在',
                        delay: 200,
                        type: 'POST',
                        data: {
                            typId: function () {
                                return $("#typeForm-create input[name='typId']").val();
                            }
                        }
                    }
                }
            },
            typSortNum:{validators: {notEmpty: {message: '请输入显示顺序'}}}
        }
    });

    /** 导入模态框隐藏事件，重置表单，重置验证 */
    js.modal.hideEvent("modal-edit-type", function () {
        js.validate.reset("typeForm-edit");
        js.reset("typeForm-edit");
    });
    /** 导入表单验证 */
    js.validate.init("typeForm-edit", {
        fields: {
            typName: {validators: {notEmpty: {message: '请输入设备台账类型'},
                    remote: {
                        url: ctx + "tool/equipmentType/checkUnique",
                        message: '设备台账类型已存在',
                        delay: 200,
                        type: 'POST',
                        data: {
                            typId: function () {
                                return $("#typeForm-edit input[name='typId']").val();
                            }
                        }
                    }}},
            typSortNum:{validators: {notEmpty: {message: '请输入显示顺序'}}}
        }
    });

    /*
    *添加类型
     */
    function addType(){
        js.modal.open("modal-create-type");
    }
    /** 创建类型 */
    $("#btn-create-type").click(function () {
        if (js.validate.isValid("typeForm-create")) {
            js.post({
                url: ctx + "tool/equipmentType/add",
                data: $("#typeForm-create").serialize(),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-create-type");
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
        }
    });

    /** 创建类型 */
    $("#btn-edit-type").click(function () {
        if (js.validate.isValid("typeForm-edit")) {
            js.post({
                url: ctx + "tool/equipmentType/edit",
                data: $("#typeForm-edit").serialize(),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-edit-type");
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        }
    });


    /*
    *编辑类型
     */
    function editType(typId,typName,typSortNum){
        $("#typeForm-edit [name='typId']").val(typId);
        $("#typeForm-edit [name='typName']").val(typName);
        $("#typeForm-edit [name='typSortNum']").val(typSortNum);
        js.modal.open("modal-edit-type");

    }
    /*
    *删除类型
     */
    function delType(id){
        js.confirmPost({
            content: "删除数据将无法恢复，确认删除吗？",
            url: ctx + "tool/equipmentType/del",
            data: {"typId":id},
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-edit-type");
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        });
    }

    var table;

    $(function () {

        /** 加载用户表格 */
        table = js.table.init({
            url: ctx + "tool/equipmentType/sel",
            showColumns: true,
            showExport: false,
            exportOptions:{
                ignoreColumn: [3,4,5,6,7]
            },
            columns: [
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index, field) {
                        var pageSize = table.bootstrapTable('getOptions').pageSize;
                        var pageNumber = table.bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                        // return index + 1;
                    }
                },
                { title: "设备台账类型", field: 'typName'},
                { title: "排序", field: 'typSortNum'},
                { title: "创建人", field: 'typCreUser',width: 70},
                { title: "创建时间", field: 'typCreDate',width: 100},
                { title: "最后一次修改人", field: 'typUpdUser',width: 70},
                { title: "修改时间人", field: 'typUpdDate',width: 100},
                {
                    title: "操作",
                    width: '110',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (hasP("basic:acctype:edit")) {
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="editType(' + row.typId + ',\'' + row.typName + '\',\'' + row.typSortNum + '\')"> 编辑</a> ');
                        // }
                        // drive:sbtype:del
                        // if (hasP("drive:sbtype:edit")) {
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delType(' + row.typId + ')"> 删除</a> ');
                        }
                        return actions.join('');
                    }
                }
            ]
        });

        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });


    });

</script>